<template>
  <div class='roleList'>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form ref="form" :inline="true" :model="form" class="demo-form-inline">
          <el-form-item prop="name" label="角色名称">
            <el-input v-model="form.name" placeholder="角色名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button @click="onRest">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-button @click="addUser">添加角色</el-button>
      <el-table
        border
        :data="roleData"
        style="width: 100%">
        <el-table-column
          align="center"
          type="index"
          label="编号"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="角色名称"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="description"
          label="描述">
        </el-table-column>
        <el-table-column
          align="center"
          prop="createdTime"
          label="添加时间">
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button @click="$router.push({
              name: 'alloc-menu',
              params: {
                roleId: scope.row.id
              }
            })" type="text" size="small">分配菜单</el-button>
            <el-button
              @click="$router.push({
                name: 'allocResource',
                query: {
                  roleId: scope.row.id
                }
              })"
              type="text"
              size="small"
            >分配资源</el-button>
            <el-button @click="handleChange(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
      :title="isEditor ? '编辑角色' : '创建角色'"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <create-or-editor
        v-if="dialogVisible"
        :isEditor="isEditor"
        :roleId="roleId"
        @success="onSuccess"
        @cancel="dialogVisible = false"
      />
    </el-dialog>
  </div>
</template>

<script lang='ts'>

import Vue from 'vue'
import { getRoleAll, deleteRole, getRolePages } from '@/services/role'
import { Form } from 'element-ui'
import CreateOrEditor from './CreateOrEditor.vue'
export default Vue.extend({
  name: 'roleList',
  data () {
    return {
      form: {
        name: ''
      },
      roleData: [],
      dialogVisible: false,
      roleId: null,
      isEditor: false
    }
  },
  components: {
    CreateOrEditor
  },
  mounted () {
    this.getRoleAll()
  },
  methods: {
    async getRoleAll () {
      const { data } = await getRoleAll()
      if (data.code === '000000') {
        this.roleData = data.data
      }
    },
    async onSubmit () {
      const { data } = await getRolePages(this.form)
      console.log(data.data)
      if (data.code === '000000') {
        this.roleData = data.data.records
      }
    },
    addUser () {
      this.dialogVisible = true
      this.isEditor = false
    },
    onRest () {
      (this.$refs.form as Form).resetFields()
    },
    // handleChangeData () {
    //   console.log('分配资源')
    // },
    handleChange (item: any) {
      this.dialogVisible = true
      this.roleId = item.id
      this.isEditor = true
    },
    async handleDelete (item: any) {
      const { data } = await deleteRole(item.id)
      if (data.code === '000000') {
        this.$message.success(data.mesg)
        this.getRoleAll()
      }
    },
    onSuccess () {
      this.dialogVisible = false
      this.getRoleAll()
    }
  }
})
</script>

<style lang='scss' scoped>
  .el-table{
    margin-top: 10px;
  }
</style>
